<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>试卷管理</title>
    <#include "/common/link.ftl">

</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl">
    <#assign currentMenu="exam"/>
    <#include "/common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>在线答题</h1>
        </section>
        <section class="content">
            <div class="box" style="padding: 10px">
                <div class="row">

                    <div class="col-md-offset-4 col-md-8">
                        <h1 class="col-md-offset-1">${exam.title}</h1>
                    </div>
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="col-md-4">时间：${exam.examMinute}分钟</div>
                                <div class="col-md-4">总分：${exam.totalScore}分</div>
                                <div style="float: right;">
                                    <button type="button" disabled class="btn btn-success btn-checkScore btn-time">开始计时</button>
                                    <button type="button" class="btn btn-success btn-checkScore">交卷</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>一、单选题（共${(radioList[0].score * radioList?size)!}分）</h3>
                    </div>
                    <#list radioList as radio>
                        <div class="panel-body">
                            <p>${radio.sequence}.${radio.title}<span>（${radio.score}分）</span></p>
                            <#list radio.questionItems as q>
                                <p>${q.title}</p>
                            </#list>
                            <div>请输入答案: <input name="radioAns" type="text" data-score="${radio.score}"
                                               data-ans="${radio.getAns()}"></div>
                            <#--                            <div style="color:red">正确答案：${radio.getAns()}</div>-->
                        </div>
                    </#list>


                    <div class="panel-heading">
                        <h3>二、多选题（共20分）</h3>
                    </div>
                    <#list checkboxList as checkbox>
                        <div class="panel-body">
                            <p>${checkbox.sequence}.${checkbox.title}<span>（${checkbox.score}分）</span></p>
                            <#list checkbox.questionItems as c>
                                <p>${c.title}</p>
                            </#list>
                            <div>请输入答案: <input type="text" name="checkboxAns" data-score="${checkbox.score}"
                                               data-ans="${checkbox.getAns()}"></div>
                            <#--                            <div style="color:red">正确答案：${checkbox.getAns()}</div>-->
                        </div>
                    </#list>


                    <div class="panel-heading">
                        <h3>三、判断题（共20分）</h3>
                    </div>
                    <#list judgeList as judge>
                        <div class="panel-body">
                            <p>${judge.sequence}.${judge.title}<span>（${judge.score}分）</span></p>
                            <p>A.正确</p>
                            <p>B.错误</p>
                            <div>请输入答案: <input type="text" name="judgeAns"
                                               data-ans="${((judge.judgeRight)?string("A", "B"))!}"
                                               data-score="${judge.score}"/></div>
                            <#--                            <div style="color:red">正确答案：${((judge.judgeRight)?string("正确", "错误"))!}</div>-->
                        </div>
                    </#list>
                </div>
            </div>
        </section>

    </div>
    <#include "/common/footer.ftl">
</div>
<script>
    var defaultTime =0;
    var timer =null;
    var hours,minutes,seconds,liftTime,time;
    var examMinute = "${exam.examMinute * 60}" ;
    timer = setInterval(function () {
        defaultTime++;
        //有多少小时
        hours = parseInt(defaultTime / (60 * 60));
        //计算小时候剩余的时间
        liftTime = defaultTime % (60 * 60);
        //多少分钟
        minutes = parseInt(liftTime / 60);
        //秒
        seconds = parseInt(liftTime % 60);
        time = (hours > 9 ? hours : '0' + hours) + ':'
            + (minutes > 9 ? minutes : '0' + minutes) + ':'
            + (seconds > 9 ? seconds : '0' + seconds);
        $('.btn-time').html(time);

        if(examMinute == defaultTime){
            Swal.fire({
                title: "时间到, 考试结束",
                icon: "info",
            }).then((result) => {
                commit();
            });
        }
    }, 1000);

    var totalScore = 0;
    var userAnswer = "";
    function addScore(src) {
        src.each(function (index, ele) {
            var ansJson = $(ele).data("ans");
            var scoreJson = $(ele).data("score");
            var answer = $(ele).val();
            if (answer != null && answer != "") {
                userAnswer += answer + "&";
                if (answer == ansJson) {
                    totalScore += scoreJson;
                }
            }
        });
    }
    function commit(){
        $.post("/exam/commitExam", {
            "score": totalScore,
            "answerSerialize": userAnswer,
            "exam.id":${exam.id},
            "answerTime": Number(defaultTime / 60).toFixed(2)
        }, function (data) {
            console.log(data);
            if (data.success) {
                Swal.fire({
                    title: totalScore + "分",
                    text: "恭喜你完成答题!",
                    icon: "success",
                }).then((result) => {
                    if (result.value) {
                        window.location.href = "/exam/list";
                    }
                });
            }
        })
    }

    $("input[name=radioAns]").change(function () {
        addScore($(this));
    });

    $("input[name=checkboxAns]").change(function () {
        addScore($(this));
    });

    $("input[name=judgeAns]").change(function () {
        addScore($(this));
    });

    $(".btn-checkScore").click(function () {
        console.log(totalScore);
        Swal.fire({
            title: "确认交卷吗?",
            icon: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonText: "确定"
        }).then((result) => {
            if (result.value) {
                commit();
            }
        });
    });
</script>
</body>
</html>